<template>
  <div>
    <c-r-m-list-head title="批量报销" :crm-type="crmType" @on-export="exportInfos">
      <el-button slot="right" type="primary" @click="handleAdd"> 新建报销单 </el-button>
    </c-r-m-list-head>
    <div class="crm-container">
      <c-r-m-table-head
        ref="crmTableHead"
        :crm-type="crmType"
        type="crmType"
        :is-seas="isSeas"
        @filter="handleFilter"
        @handle="handleHandle"
        @scene="handleScene"
      />
      <el-table
        class="n-table--border"
        id="crm-table"
        v-loading="loading"
        :data="list"
        :height="tableHeight"
        stripe
        border
        highlight-current-row
        style="width: 100%"
        @row-click="handleRowClick"
        @header-dragend="handleHeaderDragend"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          v-for="(item, index) in fieldList"
          :key="index"
          show-overflow-tooltip
          :fixed="index == 0"
          :prop="item.prop"
          :label="item.label"
          width="160"
          :formatter="fieldFormatter"
        >
          <template slot="header" slot-scope="scope">
            <div class="table-head-name">{{ scope.column.label }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220">
          <template slot-scope="scope">
            <el-button type="primary" @click.stop="handleEdit(scope.row, 'detail')">
              详情
            </el-button>
            <el-button
              v-if="['撤销', '失败', 3, 4].includes(scope.row.status)"
              type="primary"
              @click.stop="handleEdit(scope.row, 'edit')"
            >
              编辑
            </el-button>
            <el-button type="warning" @click.stop="handleEdit(scope.row, 'print')">
              打印
            </el-button>
          </template>
        </el-table-column>
        <el-table-column fixed="right" width="56">
          <template slot="header" slot-scope="slot">
            <img src="@/assets/img/t_set.png" @click="handleTableSet" class="table-set" />
          </template>
        </el-table-column>
      </el-table>
      <div class="p-contianer">
        <el-pagination
          class="p-bar"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size.sync="pageSize"
          layout="slot, total, sizes, prev, pager, next, jumper"
          :total="total"
        />
      </div>
    </div>
    <Form-dialog
      v-model="formShow"
      :form="editForm"
      show-detail
      :handle="handleType"
      @on-close="onClose"
      @on-success="getList"
      @on-detail="handleDetail"
    />
    <Print-dialog v-model="printShow" :form="editForm" @on-close="onClose" />
    <fields-set
      :crm-type="crmType"
      :dialogVisible.sync="showFieldSet"
      @set-success="setSave"
    />
    <c-r-m-all-detail
      :visible.sync="showDview"
      :crmType="crmType"
      :id="rowID"
      @handle="handleHandle"
      class="d-view"
    />
  </div>
</template>
<script>
import CRMAllDetail from "@/views/customermanagement/components/CRMAllDetail";
import FormDialog from "@/views/customermanagement/expence/components/FormDialog";
import PrintDialog from "@/views/customermanagement/expence/components/PrintDialog";
import table from "../mixins/table";
import { detailExpence } from "@/api/customermanagement/expence";
export default {
  components: {
    CRMAllDetail,
    FormDialog,
    PrintDialog,
  },
  mixins: [table],
  data() {
    return {
      crmType: "expence",
      isSeas: true,
      formShow: false, // 新建表单
      editForm: {}, // 编辑表单
      printShow: false, // 打印表单
      handleType: "add",
    };
  },
  methods: {
    // 新建报销单
    handleAdd() {
      this.handleType = "add";
      this.formShow = true;
    },
    // 报销单
    handleEdit(row, type) {
      detailExpence({ id: row.id }).then((res) => {
        this.editForm = res.data;
        if (type === "detail") {
          // 查看报销单
          this.handleType = "detail";
          this.formShow = true;
        } else if (type === "edit") {
          // 编辑报销单
          // 0=>"待审",1=>"审批中",2=>"通过",3=>"失败",4=>"撤销";
          if (!["失败", "撤销", 3, 4].includes(row.status)) {
            this.$message.error("该报销单不能编辑");
          } else {
            this.handleType = "edit";
            this.formShow = true;
          }
        } else if (type === "print") {
          // 打印报销单
          this.printShow = true;
        }
      });
    },
    // 关闭编辑表单
    onClose() {
      this.editForm = {};
      this.rowID = "";
      this.showDview = false;
    },
    // 查看详情
    handleDetail(row) {
      if (this.showDview) {
        this.showDview = false;
        this.rowID = "";
      }
      this.$nextTick(() => {
        this.rowID = row.contract_id;
        this.showDview = true;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../styles/table.scss";
</style>
